<template>
  <div>
    <div style="fontSize:24px;fontWeight:600">我的账号</div>
    <div style="padding:10px 0;">当前绑定的手机 <span style="color:#409EFF">{{userInfo.phone}}</span></div>
    <div style="padding:10px 0;">最近一次登录时间 <span style="color:#409EFF">{{lastTime}}</span></div>


    <!-- 列表 -->
    <div style="fontSize:24px;fontWeight:600">当前付费套餐</div>
    <el-table
      :data="userInfo.vip_package_list"
      style="width: 100%">
      <el-table-column
        prop="vip_package_name"
        label="套餐名称"
        width="200"
      >
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="t"-->
<!--        label="收费周期"-->
<!--        width="200"-->
<!--      >-->
<!--      </el-table-column>-->

      <el-table-column
        prop="vip_package_free"
        label="价格"
        width="100"
      >
      </el-table-column>
      <el-table-column
        prop="vip_package_time"
        label="付费时间"
        width="200"
      >
      </el-table-column>
      <el-table-column
        prop="vip_package_end_time"
        label="到期时间"
        width="200"
      >
      </el-table-column>
<!--      <el-table-column-->
<!--        prop="bind_method_name"-->
<!--        label="来源"-->
<!--        width="200"-->
<!--      >-->
<!--      </el-table-column>-->
      <el-table-column label="操作" width='350'>
        <template slot-scope="scope" v-if="scope.row.is_exist!=1">
          <el-button size="medium" type='primary' @click="toBandCompany(scope.row.vip_package_id,scope.row.vip_package_name,'续费套餐')">续费</el-button>
        </template>
      </el-table-column>

    </el-table>
    <!-- 列表end -->


    <!-- 套餐列表 -->
    <div style="fontSize:24px;fontWeight:600">选购套餐</div>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="套餐名称"
        min-width="200"
      >
      </el-table-column>
      <el-table-column
        label="权益"
        min-width="200"
      >
        <template slot-scope="scope">
          <p v-if="scope.row.vip_rule_list[1].value=='有'">支持创建个人名片，邀请新用户且成为平台VIP用户则可获得积分</p>
          <p v-if="scope.row.vip_rule_list[0].value=='有'">支持创建企业名片，邀请新用户且成为平台VIP用户则可获得积分</p>
          <p>成为平台分销商，成功发展下级分销商可获得提成收益</p>
        </template>
      </el-table-column>
      <el-table-column
        prop="free"
        label="价格"
        min-width="100"
      ></el-table-column>
      <el-table-column
        prop="keep_time"
        label="收费周期"
        min-width="100"
      >
        <template slot-scope="scope">
          <span>{{scope.row.keep_time}}个月</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width='350'>
        <template slot-scope="scope">
          <el-button size="medium" type='primary' @click="toBandCompany(scope.row.id,scope.row.name,'购买套餐')">购买</el-button>
        </template>
      </el-table-column>

    </el-table>


    <!--套餐弹窗-->
    <el-dialog :title="dialogTitle" :visible.sync="signatureVisible" @close="initData">
      <el-form :label-position="'left'" label-width="150px">
        <el-form-item label="已选套餐">
          <div>{{vip_package_name}}</div>
        </el-form-item>
        <el-form-item label="购买数量">
          <el-input placeholder="输入数量" type="number" min="1" style="width:200px" v-model="vip_package_number"></el-input>
        </el-form-item>
        <el-form-item label="付款二维码">
          <img v-if="codeUrl.length>0" :src="'https://wxapp.gdhrma.org.cn/api/payment/getPayQrCode?code_url='+codeUrl">
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button  @click="getPayStatus(1)">取消</el-button>
        <el-button type="success" @click="getPayStatus(2)">支付完成</el-button>
      </div>
    </el-dialog>
    <!--    end-->
  </div>
</template>
<script>
  export default {
    name: 'member',
    data() {
      return {
        lastTime: window.localStorage.getItem('last_time'),
        signatureVisible: false,//编辑弹窗
        myTableData: [{}],
        tableData: [{status: true}],
        page: 1,
        totalPage: 0,
        member: {
          content: '',
          cycle: '',//天数
          customizeCycle: ''//自定义天数
        },
        photoImg: '',
        photoID: '',
        userInfo:{},
        vip_package_name: '',
        vip_package_id: '',
        vip_package_number: 1,
        codeUrl: '',
        order_num: '',
        dialogTitle: ''
      }
    },
    methods: {
      //获取用户信息
      async getUserInfo(){
        let params = {
          user_token: window.localStorage.getItem('user_token')
        }
        const res = await this.$api.getUserDetail(params)
        if(res.data.level=='success'){
          this.userInfo = res.data.data
        }else{
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
        }
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getData();
      },
      getData() {

      },
      toBandCompany(id,name,title) {
        this.vip_package_id = id;
        this.vip_package_name = name;
        this.dialogTitle = title;
        this.signatureVisible = true;
        this.buildOrder();
      },
      //创建订单
      async buildOrder(){
        let params = {
          user_token: window.localStorage.getItem('user_token'),
          type: 'vip',
          vip_package_id: this.vip_package_id,
          num: this.vip_package_number
        }
        const res = await this.$api.buildOrder(params);
        if (res.data.level == 'success'){
          this.order_num = res.data.data.order_num;
          this.weChatPayment()
        }
      },
      //微信支付
      async weChatPayment(){
        let params = {
          user_token: window.localStorage.getItem('user_token'),
          order_num: this.order_num
        }
        const res = await this.$api.weChatPayment(params);
        if (res.data.level == 'success'){
          this.codeUrl = res.data.code_url
          // this.getPayQrCode(res.data.code_url);
        }
      },
      //获取支付状态
      async getPayStatus(type){
        const res = await this.$api.getPayStatus({order_num: this.order_num,type: type})
        if (res.data.level == 'success'){
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
          this.signatureVisible = false;
          this.getUserRightsList();
          this.getUserInfo();
        }else {
          this.$message({
            message: res.data.message,
            type: 'warning'
          });
          this.signatureVisible = false;
          this.getUserRightsList();
          this.getUserInfo();
        }
      },
      setMeal() {
        this.signatureVisible = true
      },
      pageChange(e) {
        //翻页
        this.page = e;
        this.getUserRightsList();
      },
      async getUserRightsList() {
        let res = await this.$api.getUserRightsList({type:'user'});
        if (res.data.level == 'success') {
          this.tableData = res.data.data;

          // this.tableData.vipListHeader = res.data.data[0].vip_rule_list;//获取表头
        }
      },


      initData() {
        this.vip_package_number = 1
      }

    },
    mounted() {
      this.getUserRightsList();
      this.getUserInfo();
    },
    watch:{
      vip_package_number(newValue, oldValue){
        this.buildOrder();
      }
    }
  }
</script>
<style lang="scss" scoped>
  .screen {
    margin-top: -10px !important;
  }

  .action-bar {
    background-color: #f2f2f2;
    height: 60px;
    margin: 10px 0px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    padding-left: 20px;

    .action-bar-input {
      width: 250px;
      margin-right: 14px;
    }

    .task-form-text {
      color: #666666;
    }
  }

  .el-table-style {
    width: 100%;
    border: 1px solid #f2f2f2;
  }

  .footer-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f2f2f2;
    padding: 8px;
    margin: 10px 0px;
    box-sizing: border-box;
  }

  .dialog-footer {
    text-align: center;
  }

  .executorList {
    display: flex;
    flex-wrap: wrap;

    div {
      margin: 10px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding: 5px 10px;
    }
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    object-fit: contain;
  }

  .add-table-wrapper {
    display: flex;
    justify-content: center;
    padding: 30px 0;
  }
</style>
